<template>
  <div class="container">
     <component :is="currentPage"/>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { listen } from "@tauri-apps/api/event";
import addr from "./components/addr.vue"; // 不能用大括号引用
import todo from "./components/todo.vue";

const currentPage = ref(todo);

// 当组件挂载时，监听菜单事件
onMounted(() => {
  const unlisten = listen('menu-event', (event) => {

    console.log(event);
    if (event.payload === 'addr_tool') {
      currentPage.value = addr;
    } else if (event.payload === 'todo_tool') {
      currentPage.value = todo;
    }
  });

  onUnmounted(() => {
    unlisten.then((off) => off());
  });
});
</script>